const path = require('path')
//启动热更新
const webpack = require('webpack')
// 1.cnpm i html-webpack-plugin 2.启用html插件,
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')


// path路径模块
module.exports = {
    //entry：入口,指定要打包的是main.js
    entry: path.join(__dirname, './src/main.js'),
    //output：出口，指定打包生成在dist目录下生成bundle.js，项目中引入bundle.js 使main.js中jquery代码生效。在html代码中不能直接使用jquery
    output: {
        path: path.join(__dirname, './dist'),
        filename: "bundle.js"
    },
    resolve: {
        alias: {
            "vue$": "vue/dist/vue.js"
        }
    },
    devServer: {
        //自动打开浏览器
        open: true,
        contentBase: 'src',
        // 启用热更新 ，要在
        hot: true,
        progress: true
    },
    plugins: [
        new VueLoaderPlugin(),
        //热部署插件
        new webpack.HotModuleReplacementPlugin(),
        //3.在内存中创建页面。2.自动帮助导入bundle.js  访问http://localhost:2000/index123.html即可
        new htmlWebpackPlugin({
            //指定模板页面，将来会根据路径生成内存的页面
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        })],
    module: { //用于配置第三方模块的加载器
        //配置规则
        rules: [{test: /\.css$/, use: ['style-loader', 'css-loader']}
            , {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
            , {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
            , {test: /\.(jpg|png|bmp|jpeg)$/, use: 'url-loader'}
            , {test: /\.vue$/, use: 'vue-loader'} //处理vue文件的loader
        ]
    }
}
